<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style>
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .chromeframe {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
    }

    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999999;
    }

    #loader {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      width: 80px;
      height: 80px;
      margin: -40px 0 0 -40px;
      z-index: 1001;
    }

    #loader:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top-color: #FFF;
      -webkit-animation: spin 1s linear infinite;
      -moz-animation: spin 1s linear infinite;
      -o-animation: spin 1s linear infinite;
      -ms-animation: spin 1s linear infinite;
      animation: spin 1s linear infinite;
    }

    #loader:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-top-color: #FFF;
      -webkit-animation: spin 1.5s linear infinite reverse;
      -moz-animation: spin 1.5s linear infinite reverse;
      -o-animation: spin 1.5s linear infinite reverse;
      -ms-animation: spin 1.5s linear infinite reverse;
      animation: spin 1.5s linear infinite reverse;
    }


    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }


    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background: var(--loading-bg-color, #7171C6);
      z-index: 1000;
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
      /* 添加平滑的颜色过渡效果 */
      transition: background-color 0.3s ease-in-out;
    }

    /* 预设主题色类，确保页面加载时立即显示正确颜色 */
    #loader-wrapper .loader-section.theme-blue {
      background: #3867D6;
    }
    #loader-wrapper .loader-section.theme-cyan {
      background: #1890ff;
    }
    #loader-wrapper .loader-section.theme-green {
      background: #11a983;
    }
    #loader-wrapper .loader-section.theme-purple {
      background: #6959CD;
    }
    #loader-wrapper .loader-section.theme-red {
      background: #f5222d;
    }
    #loader-wrapper .loader-section.theme-orange {
      background: #ff7a45;
    }
    #loader-wrapper .loader-section.theme-pink {
      background: #eb2f96;
    }

    #loader-wrapper .loader-section.section-left {
      left: 0;
    }

    #loader-wrapper .loader-section.section-right {
      right: 0;
    }


    .loaded #loader-wrapper .loader-section.section-left {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader {
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .loaded #loader-wrapper {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all 0.3s 1s ease-out;
      transition: all 0.3s 1s ease-out;
    }

    .no-js #loader-wrapper {
      display: none;
    }

    .no-js h1 {
      color: #222222;
    }

    #loader-wrapper .load_title {
      font-family: 'Open Sans';
      color: #FFF;
      font-size: 19px;
      width: 100%;
      text-align: center;
      z-index: 9999999999999;
      position: absolute;
      top: 60%;
      opacity: 1;
      line-height: 30px;
    }

    #loader-wrapper .load_title span {
      font-weight: normal;
      font-style: italic;
      font-size: 13px;
      color: #FFF;
      opacity: 0.5;
    }
  </style>
  
  <!-- 主题色动态设置脚本 -->
  <script>
    (function() {
      // 颜色处理工具函数
      function hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16)
        } : null;
      }
      
      function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
      }
      
      function rgbToHsl(r, g, b) {
        r /= 255;
        g /= 255;
        b /= 255;
        
        const max = Math.max(r, g, b);
        const min = Math.min(r, g, b);
        let h, s, l = (max + min) / 2;
        
        if (max === min) {
          h = s = 0;
        } else {
          const d = max - min;
          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
          
          switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
          }
          h /= 6;
        }
        
        return { h: h * 360, s: s * 100, l: l * 100 };
      }
      
      function hslToRgb(h, s, l) {
        h /= 360;
        s /= 100;
        l /= 100;
        
        const hue2rgb = (p, q, t) => {
          if (t < 0) t += 1;
          if (t > 1) t -= 1;
          if (t < 1/6) return p + (q - p) * 6 * t;
          if (t < 1/2) return q;
          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
          return p;
        };
        
        let r, g, b;
        
        if (s === 0) {
          r = g = b = l;
        } else {
          const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
          const p = 2 * l - q;
          r = hue2rgb(p, q, h + 1/3);
          g = hue2rgb(p, q, h);
          b = hue2rgb(p, q, h - 1/3);
        }
        
        return {
          r: Math.round(r * 255),
          g: Math.round(g * 255),
          b: Math.round(b * 255)
        };
      }
      
      // 自动调整颜色亮度，让loading背景色更和谐
      function adjustColorForLoading(hexColor) {
        const rgb = hexToRgb(hexColor);
        if (!rgb) return hexColor;
        
        const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
        
        // 根据原色的亮度自动调整，让颜色更淡
        let adjustedL, adjustedS;
        
        // 降低饱和度，让颜色更淡
        adjustedS = Math.max(hsl.s * 0.4, 10); // 降低饱和度到40%，最低保持10%
        
        // 根据原色的亮度自动调整
        if (hsl.l > 50) {
          // 如果原色较亮，则加深（降低亮度）
          adjustedL = Math.max(hsl.l - 15, 25);
        } else if (hsl.l < 25) {
          // 如果原色较暗，则减淡（提高亮度）
          adjustedL = Math.min(hsl.l + 20, 60);
        } else {
          // 中等亮度，轻微调整
          adjustedL = hsl.l > 35 ? hsl.l - 5 : hsl.l + 10;
        }
        
        const adjustedRgb = hslToRgb(hsl.h, adjustedS, adjustedL);
        return rgbToHex(adjustedRgb.r, adjustedRgb.g, adjustedRgb.b);
      }
      
      // 立即执行的函数，在页面开始渲染前就设置主题色
      function getThemeColor() {
        try {
          // 尝试从localStorage读取主题设置
          var layoutSetting = localStorage.getItem('layout-setting');
          
          if (layoutSetting) {
            var setting = JSON.parse(layoutSetting);
            if (setting.theme) {
              return setting.theme;
            }
          }
        } catch (e) {
          console.warn('读取主题设置失败:', e);
        }
        // 返回默认主题色
        return '#3867D6';
      }
      
      // 应用主题色到loading页面
      function applyThemeColor() {
        var themeColor = getThemeColor();
        var adjustedColor = adjustColorForLoading(themeColor);
        
        // 获取loading元素
        var loaderSections = document.querySelectorAll('#loader-wrapper .loader-section');
        
        // 设置CSS变量 - 使用调整后的颜色
        document.documentElement.style.setProperty('--loading-bg-color', adjustedColor);
        
        // 直接设置调整后的背景色
        loaderSections.forEach(function(section) {
          section.style.background = adjustedColor;
        });
      }
      
      // 立即应用主题色，不等待DOM加载
      applyThemeColor();
      
      // DOM加载完成后再次确认应用
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
          // 延迟一点时间，确保CSS变量已经生效
          setTimeout(applyThemeColor, 10);
        });
      } else {
        // 如果DOM已经加载完成，延迟一点时间再应用
        setTimeout(applyThemeColor, 10);
      }
      
      // 监听localStorage变化，实时更新主题色
      window.addEventListener('storage', function(e) {
        if (e.key === 'layout-setting') {
          setTimeout(applyThemeColor, 50);
        }
      });
    })();
  </script>
  </head>
  <body>
    <div id="app">
	    <div id="loader-wrapper">
		    <div id="loader"></div>
		    <div class="loader-section section-left"></div>
		    <div class="loader-section section-right"></div>
		    <div class="load_title">正在加载系统资源，请耐心等待</div>
        </div>
	</div>
  </body>
</html>
